<template>
  <div>
      <el-form ref="formObj" :rules="rules" :model="user" label-width="auto" style="max-width: 600px;">
        <el-form-item label="姓名" prop="name">
          <el-input maxlength="255" v-model="user.name" placeholder="请输入管理员姓名"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input maxlength="255" v-model="user.nickName" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker
              v-model="user.birthday"
              type="date"
              placeholder="请选择生日"
              value-format="YYYY-MM-DD"
            />
        </el-form-item> 
        <el-form-item label="手机号" prop="phone">
          <el-input maxlength="15" v-model="user.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input maxlength="64" v-model="user.email" placeholder="请输入电子邮箱"></el-input>
        </el-form-item>
         <el-form-item label="地址" prop="address">
          <el-input maxlength="255" v-model="user.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item v-if="!props.id" label="用户类型" prop="roleId">
           <el-select v-model="user.roleId" placeholder="请选择用户类型" style="width: 240px">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
        </el-form-item>
        <el-form-item v-if="!props.id" label="密码" prop="password">
          <el-input maxlength="255" v-model="user.password" placeholder="请输入密码" show-password="true"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="file">
          <div style="width: 150px;  height: 150px;overflow: hidden;">
            <el-upload
            v-model:file-list="fileList"
            :auto-upload="false"
            action="#"
            :limit="1"
            list-type="picture-card"
            :on-change="uploadFile"
            :on-remove="removeFile">
            <el-icon><PictureFilled /></el-icon>
          </el-upload>
          </div>
        </el-form-item>
        <el-button style="margin-left: 70px;" @click="save">提交</el-button>
        <el-button @click="empty">清空</el-button>
      </el-form>
  </div>
</template>
<script setup>
import { _axios,get,post } from '@/plugins/axios' 
import { ref,reactive } from 'vue'
import { PictureFilled } from '@element-plus/icons-vue'
import path from "./path"
// 子组件和组件共享数据和函数
const emits = defineEmits(['update:show','getTableData'])
// 父组件向子组件传递数据
const props = defineProps(['id'])
// 用来保存表单数据
const user = reactive({
  id:null,
  name: '',
  nickName:'',
  birthday:'2000-01-01',
  phone:'',
  email:'',
  address: '',
  password:'',
  state:0,
  file: null,
  icno:null,
  roleId: 2,
})
const fileList = reactive([])
function check(rule,value,callback){
  let params = {
    column: rule.fieldName,
    value,
    id: props.id
  }
  get(path.check,params,content => {
    // content == response.data.content
    if(content){
      // 可用
      callback()
    } else {
      // 不可用
      callback(new Error())
    }
  })
}
const options = ref([])
// 校验相关
const rules = reactive({
  name:[
    // 校验是否为空
    { required: true, message: '请输入姓名',trigger: 'blur'}
  ],
  nickName:[
    { required: true, message: '请输入昵称',trigger: 'blur'}
  ],
  birthday:[
    { required: true, message: '请输入生日',trigger: 'blur'}
  ],
  phone:[
    { required: true, message: '请输入手机号',trigger: 'blur'},
    // 校验格式是否正确
    { pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/, message: '请输入正确的中国手机号', trigger: 'blur' },
    // 自定义校验，向后端发送请求看是否可用
    { validator: check, message: '该手机号已经被使用', trigger: 'blur' ,fieldName: 'phone'}
  ],
  email:[
    { required: true, message: '请输入邮箱',trigger: 'blur'},
    // 校验格式是否正确
    { type: 'email', message: '请输入正确的电子信箱', trigger: 'blur' },
    // 自定义校验，向后端发送请求看是否可用
    { validator: check, message: '该邮箱已经被使用', trigger: 'blur',fieldName: 'email'}
  ],
  address:[
    { required: true, message: '请输入地址',trigger: 'blur'}
  ],
  password:[
    { required: true, message: '请输入密码',trigger: 'blur'}
  ],
    file:[
    { required: props.id === null , message: '请选择头像',trigger: 'blur'}
  ],
  roleId:[
    { required: true , message: '请选择用户类型',trigger: 'blur'}
  ]
})
// 表单对象
const formObj = ref()
if(props.id){
  user.id = props.id
  getById()
}
// 重置表单
function empty(){
  user.name = null
  user.nickName = null
  user.sex = null
  user.birthday = null
  user.phone = null
  user.email = null
  user.password = null
  user.state = null
  user.file = null
  user.icno = null
  user.address = null
  user.roleId = null
}
function getById(){
  console.log(props.id)
  get(path.get,{id:props.id},function(content){
     for(let key in user){
      // 将后端没有的属性的数据排除掉
      if(Object.prototype.hasOwnProperty.call(content,key)){
        user[key] = content[key]
      }
    }
     fileList.push({
        url: path.image + content.icon
      })
  })
}

getRole()
function getRole(){
  get('/role/arr',{},content => {
    options.value = content
  })
}

// 表单提交
function save(){
  post(props.id ? path.update : path.add,user,content => {
        emits('update:show', false)
        emits('getTableData')
      },formObj)
}

function uploadFile(file) {
  user.file = file.raw
}
function removeFile(){
  user.file = null
}

</script>
<style scoped lang='scss'>

</style>